<template>
  <div class="carlist">
    <ul class="title">
      <li class="selcet">
        <input
          type="checkbox"
          :checked="isAllSelect"
          @click="SelectAll(!isAllSelect)"
        />
        全选
      </li>
      <li class="shopname">商品名称</li>
      <li>单价</li>
      <li>数量</li>
      <li>小计</li>
      <li>操作</li>
    </ul>
    <transition-group name="li" tag="ul">
      <ul v-for="item in goodsList" :key="item.id">
        <li class="selcet">
          <input
            type="checkbox"
            :checked="item.isSelect"
            @click="changeCheckbox(item.id)"
          />
        </li>
        <li class="shopname" @click="Goodsjump(item.id)">
          <div class="imgbox">
            <img v-lazy="item.picurl" />
          </div>
          <p>{{ item.name }}</p>
        </li>
        <li>
          <span>{{ item.price }}元</span>
        </li>
        <li class="countbox">
          <button @click="subtract(item)" class="subtract">-</button>
          <input type="text" v-model.number="item.number" />
          <button @click="add(item)">+</button>
        </li>
        <li>
          <span>{{ item.price * item.number }}元</span>
        </li>
        <li @click="delItem(item.id)"><a-icon type="delete" /></li>
      </ul>
    </transition-group>
    <div class="orderbox">
      <div class="carttip">
        <router-link to="/">继续购物</router-link>
        <span>{{ goodsList.length }}</span
        >件商品，已选择<span>{{ count }}</span
        >件
      </div>
      <div class="totalPrice">
        合计：<span>{{ total }}元</span>
        <button @click="order">去结算</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Getaddress } from "@/api/ads";

export default {
  data() {
    return {
      goodsList: [],
      orderList: [],
      addressList:[]
    };
  },
  methods: {
    add(item) {
      item.number++;
    },
    // 数量控制
    subtract(item) {
      if (item.number <= 1) {
        item.number = 1;
      } else {
        item.number -= 1;
      }
    },

    // 行内删除
    delItem(nowId) {
      this.goodsList = this.goodsList.filter((item) => {
        return item.id != nowId;
      });
    },
    // 单个选择
    changeCheckbox(nowId) {
      this.goodsList.some((item) => {
        if (item.id == nowId) {
          item.isSelect = !item.isSelect;
          return true;
        }
      });
    },
    // 改变全选状态
    SelectAll(nowChencked) {
      this.goodsList.forEach((item) => {
        item.isSelect = nowChencked;
      });
    },
    Goodsjump(id) {
      this.$router.push(
        {
          path: "/Detailspage",
          query: {
            id: id,
          },
        },
        () => {}
      );
    },
    order() {
      this.goodsList.forEach((item) => {
        if (item.isSelect == true ) {
          // this.orderList.unshift(...this.goodsList.splice(index));
          this.orderList.push(item);
          localStorage.setItem("orderList", JSON.stringify(( this.orderList)))
        }
        // 跳转判断是否有选择商品
        if(this.count=== 0){
          return false
        }else{
        this.$router.push("/ordercheck");
        }
      });
    },
  },
  computed: {
    // 总个数
    count() {
      return this.goodsList.reduce((sum, item) => {
        return sum + (item.isSelect ? Number(item.number) : 0);
      }, 0);
    },
    // 合计
    total() {
      return this.goodsList.reduce((sum, item) => {
        return sum + (item.isSelect ? item.price * item.number : 0);
      }, 0);
    },
    // 全选状态
    isAllSelect() {
      if (this.goodsList.length) {
        return this.goodsList.every((item) => {
          return item.isSelect;
        });
      } else {
        return false;
      }
    },
  },
  watch: {
    goodsList: {
      handler: function () {
        localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
      },
      deep: true,
      immediate: false,
    },
  },
  created: function () {
    let list = localStorage.getItem("goodsList");
    this.goodsList = JSON.parse(list) || [];
    this.$store.state.cartnum = this.goodsList.length;
    Getaddress().then((res) => {
      this.addressList = res.data.result;
       this.$store.dispatch("addressListData", this.addressList);
    });
  },
};
</script>

<style lang="scss" scoped>
.carlist {
  cursor: pointer;
  background-color: #f5f5f5;
  padding: 30px 0 110px 0;
  min-height: 410px;
  box-sizing: content-box;
  ul {
    background-color: #fff;
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    border-top: 1px solid #e5e5e5;
    flex-wrap: wrap;
    li {
      width: 150px;
      text-align: center;
      font-size: 18px;
      .imgbox {
        margin: 0 auto;
        box-sizing: border-box;
        padding-top: 10px;
        width: 120px;
        height: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      span {
        font-size: 18px;
        color: black;
      }
      p {
        margin: 10px 0;
        font-size: 14px;
        color: black;
        white-space: wrap;
      }
      input {
        height: 15px;
        width: 15px;
      }
    }
    .countbox {
      color: black;
      text-align: center;
      button {
        border: none;
        background-color: white;
        font-size: 20px;
        outline: none;
        cursor: pointer;
      }
      input {
        border: none;
        outline: none;
        text-align: center;
        width: 100px;
      }
    }
  }
  .shopname {
    width: 380px;
  }
  .title {
    border-top: 1px solid transparent;
    height: 60px;
  }
  .selcet {
    width: 70px;
  }
  .anticon-delete {
    font-size: 20px;
  }
  .orderbox {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .carttip {
      a {
        margin-right: 30px;
      }
      span {
        color: $color;
        margin: 0 10px;
      }
    }
  }
  .totalPrice {
    color: $color;
    font-size: 18px;
    span {
      margin-right: 20px;
    }
    button {
      background-color: $color;
      color: white;
      border: none;
      outline: none;
      width: 120px;
      cursor: pointer;
    }
  }
}
.li-leave-to {
  transform: translatex(-100%);
  opacity: 0;
}

.li-leave-active {
  transition: all 1s;
}
</style>